<script lang="ts" setup name="MetaIndex">
import appStore from '@/store'
import metaHeader from '@/components/Header.vue'
import leftMenu from '@/components/LeftMenu.vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import Breadcrumb from './Breadcrumb.vue'

if (localStorage) {
  appStore.userStore.updateName(localStorage.getItem('userName') || '')
}

</script>
<template>
  <div id="main">
    <div class="Login">
      <metaHeader v-if="appStore.userStore.isLogin"></metaHeader>
      <div :class="appStore.userStore.isLogin ? 'outbox' : ''">
        <leftMenu v-if="appStore.userStore.isLogin"></leftMenu>
        <div class="router-css" :style="!appStore.userStore.isLogin ? 'padding:0;height:100%' : ''">
          <el-config-provider :locale="zhCn">
            <breadcrumb></breadcrumb>
            <router-view />
          </el-config-provider>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.outbox {
  display: flex;
  background: $bac-color;
  height: 100%;
  width: 100%;

  .router-css {
    max-height: calc(100vh - 160px);
    width: 100%;
    overflow-y: auto;
    padding: 20px 40px 50px 20px;
  }
}
</style>
